<template>
  <div class="news">
    <div class="wrap clearfix g-mt60" style="border-top: 1px solid transparent">
      <new-con :loading="loading" :current="current" :new-list="newList" :display="display" :count="count" :side-list="sideList" :current-page="currentPage" @select-page="selectPage">
      	
      </new-con>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Side from 'components/side/side'
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'
  import axios from 'axios'
  import NewCon from 'base/newCon/newCon'
  import {ERR_OK} from 'api/config'

  export default {
    data() {
      return {
        loading: false,
        newList: [],
        count: 10,
        current: {},
        currentPage: 1,
        display: 5,
        sideList: []
        
      }
    },
    created() {
      setTimeout(() => {
        this._getNewList()
      }, 1000)
    },
    methods: {
      _getNewList() {
        this.loading = false
        axios.get('/api/getData').then(res => {
          if (res.data.code === ERR_OK) {
              this.newList = res.data.data.newList
              this.loading = true
          }
        })
      },
      selectPage(data) {
      	let current = data.size
      	let display = data.display
      },
      loadingMore() {
        this.loading = false
        setTimeout(() => {
          this.newList.push(1)
          this.newList.push(1)
          this.newList.push(1)
          this.loading = true
        }, 1000)
      }
    },
    components: {
      Side,
      Scroll,
      Loading,
			NewCon
    },
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .news
    .tag
      padding: 10px 0
      .tag-item
        margin-right: 20px
      .demo-badge
        width: 42px;
        height: 42px;
        margin: 0 5px
        line-height: 42px
        text-align: center
        background: #eee;
        border-radius: 6px;
        display: inline-block;
        &:first-child
          margin-left: 0
    .new-list
      position: relative
      font-size: 0
      .new-item-wrap
        display: inline-block
        width: 280px
        margin-right: 33px
        margin-bottom: 33px;
        cursor: pointer
        font-size: $font-small-x
        &:nth-child(4n)
          margin-right:0
        .new-item
          text-align: center
          .new-pic
            display: inline-block
            wh(150px, 100px)
    .loading-more
      rbposition(0, 24px)
      wh(100%, 32px)
      text-align: center
</style>
